<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>监听器</title>
</head>
<body>
    
    <script src='/js/vue.js'></script>
    <div id='app'>
        <!-- vue 提供了一种通用的方式来观察和响应Vue实例上的数据变化，及监听器
            监听器是通过Vue实例的选项对象watch属性定义的 -->

        <p>{{value}}</p>
        <button @click="value++">button</button>

        <p>{{price}}</p>
        <p>比原价贵了{{expensive}}</p>
    </div>

    <script>
        let app = new Vue({
            el:'#app',
            data:{
                msg:'hello word',
                value:100,
                price:100,
                expensive,
                name:"abc",
                hobbies:[1,2,3,4,5,6],
                obj:{
                    man:["age","id",]
                },

            },
            methods:{
                priceChange(){
                    this.price += 10
                }
            },

            computed:{
                total(){
                    return this
                }
            },

            watch:{//监听器
                //里面也是键值对
                //key值必须和监听器的data里面的key值 名字相同
                //监听data绑定的value值，那么键值也必须是value
                //键值对中 的值必须是匿名函数
                value(newValue,oldValue){//oldValue 是监听数据变化之前的值，newValue 是监听数据变化之后的
                    console.log("value被改变了");
                    console.log("old",oldValue);
                    console.log("new",newValue);
                },

                price(newValue,oldValue){
                    this.expensive = newValue - oldValue
                },

                name(){
                    console.log("字符串改变");
                },

                hobbies(){
                    //监听数组
                    console.log("数组发生改变")
                },

                // obj(){
                //     //监听对象
                //     //简单的监听没办法监听到对象变化，这个时候就需要深度监听
                //     console.log("对象发生变化")
                // },

                obj:{
                    //深度监听，改用对象方式来监听
                    //1. deep键值对，决定此监听是否是深度监听 true 开启 false 关闭
                    deep:true,
                    //2. handler键值对 监听方法
                    handler(newValue,oldValue){
                        console.log()
                    },
                    immediate:false //立即执行监听器进入页面直接执行


                },

                total(newValue,oldValue){
                    console.log()
                }

            }
        })
    </script>
</body>
</html>